<template>
	<view>
		<scroll-view :scroll-x="true" :show-scrollbar="false">
			<view class="tag-menu">
				<view :class="active==1?'active':''" @click="tab(1,300)">全部({{numlist.TotalNum}})</view>
				<view :class="active==2?'active':''" @click="tab(2,307)">商品({{numlist.PorductNum}})</view>
				<view :class="active==3?'active':''" @click="tab(3,309)">商城({{numlist.MallNum}})</view>
				<view :class="active==4?'active':''" @click="tab(4,304)">视频({{numlist.VideoNum}})</view>
				<view :class="active==5?'active':''" @click="tab(5,302)">文章({{numlist.AticleNum}})</view>
			</view>
		</scroll-view>
		<mescroll-uni @init="mescrollInit" :height="height1" :down="downOption" @down="refresh" :up="upOption"
			@up="getData">
			<view class="main" v-for="(item,index) in datas" :key="index">
				<view class="top">
					<image v-if="item.PageType !=304" :src="easyGetImgListUrl(item.ImageUrl)" mode="aspectFill"></image>
					<image v-else :src="easyGetImgUrl(item.VideoImageUrl)" mode="aspectFill"></image>
					<view class="name">
						<view>{{item.Title}}</view>
						<view class="product-price" v-if="item.Price"><text>￥</text>
							<view>{{item.Price}}</view>
						</view>
					</view>
					<image v-if="item.IsHighIntent==1" src="../../static/intention2.png" class="label"></image>
					<image v-else src="../../static/intention1.png" class="label"></image>
					<view class="videoicon" v-if="item.PageType ==304">
						<image src="../../static/play.png"></image>
					</view>
				</view>
				<view class="bottom">
					<view class="share">
						<view>浏览量：<text>{{item.AccessNum}}</text></view>
						<view>分享数：<text>{{item.ShareNum}}</text></view>
					</view>
					<view>累计查看时长：<text v-if="item.PageType !=304">{{formateSeconds(item.StaySeconds)}}</text>
					<text v-else>{{item.MaxSeconds}}%</text>
					</view>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import {
		agenttracklist
	} from "@/service/api/vehicles.js"
	import storage from "@/uni-sub-base/utils/storage.js"
	export default {
		props: {
			data: {
				type: Array,
				default: []
			},
			userId: {
				type: String
			},
			height: {
				type: String,
				default: '100px'
			},

		},
		data() {
			return {
				datas: [],
				storeId: '',
				numlist:{},
				active:1,
				param: {
					dateType: 9,
					pageType: 300,
					eventType: 1,
					skipCount: 0,
					maxResultCount: 20,
				},
				height1:''
			}
		},
		mounted() {
			this.height1 = parseInt(this.height)-48+'px';
			console.log(this.height1)
			this.storeId = storage.getCache('businessCode')
			this.refresh()
		},
		onShow() {},
		methods: {
			tab(num,type){
				if(this.active != num){
					this.active = num;
					this.param.pageType = type;
					this.refresh()
				}
				
			},
			refresh() {
				this.datas = []
				this.mescroll.resetUpScroll()
			},
			getData(page) {
				let param = this.param
				param.maxResultCount = page.size
				param.skipCount = page.num
				param.userId = this.userId
				agenttracklist(param).then(res => {
					if (res.code==200) {
						this.total = res.data.Total;
						this.numlist = res.data.Data;
						this.mescroll.endBySize(res.data.List.length, res.data.Total);
						this.datas = this.datas.concat(res.data.List)
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.main {
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 24rpx;

		.top {
			display: flex;
			position: relative;
			padding: 24rpx;
			justify-content: flex-start;
			align-items: center;

			// border-bottom: 1rpx solid #EBEBEB;
			image {
				width: 148rpx;
				height: 148rpx;
				margin-right: 24rpx;
				border-radius: 8rpx;
			}
			.videoicon{
				width: 148rpx;
				height: 148rpx;
				position: absolute;
				left: 24rpx;
				top: 24rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				image{
					width: 56rpx;
					height: 56rpx;
					margin-right: 0rpx;
				}
			}
			.name {
				display: flex;
				flex: 1;
				height: 148rpx;
				flex-direction: column;
				justify-content: space-around;
				font-size: 30rpx;
				.product-price {
					display: flex;
					align-items: baseline;
					color: $app-color-main;
					font-size: 36rpx;

					text {
						color: $app-color-main;
						font-size: 20rpx;
					}
					view{
						font-weight: bold;
					}
				}
			}

			.label {
				width: 96rpx;
				height: 96rpx;
				top: 0;
				right: -24rpx;
				position: absolute;
			}

		}

		.bottom {
			color: $color-gray-3;
			padding: 12rpx 24rpx 24rpx 24rpx;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.share {
				display: flex;
				justify-content: flex-start;

				view {
					margin-right: 30rpx;
					text{
						font-size: 26rpx;
						font-weight: bold;
					}
				}
				
			}
		}

		.tag-menu {
			display: flex;
			justify-content: flex-start;
			padding-left: 24rpx;
			margin: 10px 0 24rpx 0;

			view {
				height: 52rpx;
				background: rgba(196, 24, 31, 0.1);
				border-radius: 26rpx;
				margin-right: 20rpx;
				font-size: 26rpx;
				padding: 0rpx 26rpx;
				color:$app-color-main;
				display: flex;
				justify-content: center;
				align-items: center;
				white-space: nowrap;
			}

			.active {
				background:$app-color-main;
				color: #FFFFFF;
			}

		}
	}
</style>
